<template>
  <div class="aid">
    <div class="base">
      <p>回访
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="问题是否解决" prop="SolveState">
          <a-radio-group name="radioGroup" v-model="form.SolveState" @change="solveChange">
            <a-radio :value="1">
              未解决
            </a-radio>
            <a-radio :value="2">
              已解决
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否继续解决" prop="ContinueSolveState" v-if="isSolve">
          <a-radio-group name="radioGroup" v-model="form.ContinueSolveState" @change="solveContinueChange">
            <a-radio :value="2">
              需要
            </a-radio>
            <a-radio :value="1">
              不需要
            </a-radio>
            <!-- </a-radio-group> -->
            </a-checkbox-group>
          </a-radio-group></a-form-model-item>
        <a-form-model-item label="驳回原因" prop="Content" v-if="isContinueSolve">
          <a-input v-model="form.Content" :allowClear="true" type="textarea" :auto-size="{ minRows: 4, maxRows: 6 }"/>
        </a-form-model-item>
        <a-form-model-item label="服务态度" prop="Service">
          <a-rate v-model="form.Service" />
        </a-form-model-item>
        <a-form-model-item label="处理速度" prop="Speed">
          <a-rate v-model="form.Speed" />
        </a-form-model-item>
        <a-form-model-item label="结果是否满意" prop="Satisfie">
          <a-rate v-model="form.Satisfie" />
        </a-form-model-item>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit">
            确定
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
	import {
		addVisit
	} from '@/api/follow'

	export default {
		props: {
			messageID: String
		},
		watch: {
			messageID: function(text) {
				this.form.MessageID = text
			}
		},
		data() {
			return {
				formLayout: 'horizontal',
				isSolve: false,
				isContinueSolve: false,
				form: {
					ContinueSolveState: 1,
					SolveState: 2,
					Content: '',
					Service: 5,
					Speed: 5,
					Satisfie: 5,
					MessageID: ''
				},
				rules: {
					SolveState: [{
						required: true,
						message: '请选择是否需要解决',
						trigger: 'blur'
					}],
					ContinueSolveState: [{
						required: true,
						message: '请选择是否需要继续解决',
						trigger: 'blur'
					}],
					Content: [{
						required: true,
						message: '请输入驳回原因',
						trigger: 'blur'
					}],
					Service: [{
						required: true,
						message: '请选择服务态度',
						trigger: 'blur'
					}],
					Speed: [{
						required: true,
						message: '请选择解决速度',
						trigger: 'blur'
					}],
					Satisfie: [{
						required: true,
						message: '请选择满意程度',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun', flag)
			},
			solveChange(e) {
				e.target.value === 1 ? this.isSolve = true : this.isSolve = false, this.isContinueSolve = false, this.form.ContinueSolveState = 1
			},
			solveContinueChange(e) {
				e.target.value === 2 ? this.isContinueSolve = true : this.isContinueSolve = false
			},
			handleSubmit(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						this.form.VisitState = (this.form.SolveState == 1 && this.form.ContinueSolveState == 2) ? 5 : 6
						let res = await addVisit(this.form)
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
									this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 530px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -255px;
		overflow-y: auto;
		border-radius: 8px;
		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;
		.closeCircle{
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
